<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表盘</title>
    <style type="text/css">
        #box{
            border: 3px solid pink;
        }
    </style>
</head>
<body>
<canvas width="500" height="500" id="box">您的浏览器不支持canvas，请升级您的浏览器</canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var  pen=box.getContext("2d");
    function clock(){
        //时间
        var  date=new  Date();
        var  hour=date.getHours();
        var  min=date.getMinutes();
        var  sec=date.getSeconds();
        hour=hour>12?hour-12:hour;
        hour+=(min/60);
        //清除整个画布
        pen.clearRect(0,0,box.width,box.height);

        //原盘
        pen.strokeStyle="blue";
        pen.lineWidth=10;
        pen.beginPath();
        pen.arc(250,250,200,0,Math.PI*2);
        pen.stroke();
        pen.closePath();
        pen.save();
        pen.translate(250,250);
        pen.strokeStyle="#ffff0";
        pen.lineWidth=7;

        for(var  i=1;i<=12;i++){
            pen.rotate(Math.PI/180*30);
            pen.beginPath();
            pen.moveTo(0,-195);
            pen.lineTo(0,-175);
            pen.closePath();
            pen.stroke();
        }
        pen.restore();
        pen.save();
        pen.translate(250,250);
        pen.strokeStyle="#ffff00";
        pen.lineWidth=5;

        for(var i=1;i<=60;i++){
            pen.rotate(Math.PI/180*6);
            pen.beginPath();
            pen.moveTo(0,-195);
            pen.lineTo(0,-185);
            pen.closePath()
            pen.stroke();
        }
        pen.restore();
        //时针
        pen.save();
        pen.lineWidth=7;
        pen.strokeStyle="#00ffff";
        pen.translate(250,250);
        pen.rotate(Math.PI/180*30*hour);
        pen.beginPath();
        pen.moveTo(0,-130);
        pen.lineTo(0,10);
        pen.closePath();
        pen.stroke();
        pen.restore();

        //分针
        pen.save();
        pen.lineWidth=5;
        pen.strokeStyle="#ffff00";
        pen.translate(250,250);
        pen.rotate(Math.PI/180*6*min);
        pen.beginPath();
        pen.moveTo(0,-150);
        pen.lineTo(0,10);
        pen.closePath();
        pen.stroke();
        pen.restore();

        //秒针
        pen.save();
        pen.lineWidth=3;
        pen.strokeStyle="#ff0000";
        pen.translate(250,250);
        pen.rotate(Math.PI/180*6*sec);
        pen.beginPath();
        pen.moveTo(0,-170);
        pen.lineTo(0,10);
        pen.closePath();
        pen.stroke();

        //小圆点
        pen.beginPath();
        pen.arc(0,0,7,0,Math.PI*2);
        pen.closePath();
        pen.strokeStyle="#ff0000";
        pen.fillStyle="#ffff00";
        pen.fill();
        pen.stroke();

        pen.beginPath();
        pen.arc(0,-140,7,0,Math.PI*2);
        pen.closePath();
        pen.strokeStyle="#ff0000";
        pen.fillStyle="#ffff00";
        pen.fill();
        pen.stroke();
        pen.restore();
    }
    clock();
    setInterval(clock,1000);
</script>
</body>
</html>